<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>watch</title>
</head>

<body>
    <div id="app">
        <div id="app">
            <span>请输入要计算斐波那契数列的第几个数：</span>
            <input type="text" v-model="num">
            <p v-show="result">{{result}}</p>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    num: 0,
                    result: ''
                }
            },
            // 监听属性
            watch: {
                num(val) {
                    this.result = "请稍候...";
                    if (val > 0) {
                        const worker = new Worker("fibonacci.js");
                        worker.onmessage = (event) => this.result = event.data; worker.postMessage(val);
                    }
                    else {
                        this.result = '';
                    }
                }
            }
        }).mount(' #app');
    </script>
</body>

</html>